<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'archive',title = ${'文章归档' + ' | ' + site.title}, head = ~{::head})}">
<th:block th:fragment="head">
    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '文章归档',
                _permalink = '/archives',
                _cover = ${theme.config.other.opengraph.image},
                _excerpt = ${site.seo.description},
                _type = 'website')}"></th:block>
    <!-- 时间线样式 - 内联优化版 -->
    <style>
/* 归档页面样式 */
.simple-archive-page{max-width:1300px;margin:0 auto;padding:1.5rem 1.5rem 4rem;position:relative}
/* 背景图层 */
.simple-archive-page::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background-image:url('/upload/archive-bg-RsEJ.png');background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;z-index:-1;pointer-events:none}
/* 哲学名言区域 */
.archive-quote{text-align:center;padding:2.5rem 2rem;margin-bottom:1.8rem;position:relative;z-index:1}.quote-text{font-size:2rem;font-weight:400;color:#ffffff;line-height:2.2;font-style:normal;font-family:'STXingkai','华文行楷','KaiTi','STKaiti',cursive,serif;text-shadow:2px 2px 4px rgba(255,255,255,.9),-1px -1px 2px rgba(255,255,255,.6);letter-spacing:.2em;position:relative;display:inline-block}
.archive-container{display:flex;gap:1.8rem;align-items:flex-start;position:relative;z-index:1}
/* 左侧归档导航卡片 - 缩窄 */
.archive-sidebar{width:220px;flex-shrink:0;position:sticky;top:80px;max-height:calc(100vh - 100px)}
/* 右侧时间线卡片 */
.timeline-content{flex:1;min-width:0;background:rgba(255,240,250,.65);border-radius:12px;padding:2.5rem 1.8rem;box-shadow:0 4px 24px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.4) inset;position:relative}
/* 主时间线 - 垂直线（所有节点对齐到这条线） */
.timeline-content::before{content:'';position:absolute;left:120px;top:1rem;bottom:1rem;width:2px;background:linear-gradient(180deg,rgba(186,85,211,.2) 0%,rgba(186,85,211,.6) 50%,rgba(186,85,211,.2) 100%);z-index:1}
.timeline-wrapper{position:relative;margin-bottom:0}.timeline-wrapper:last-child{margin-bottom:0}
/* 年份行 */
.timeline-year{position:relative;display:flex;align-items:center;padding:1.2rem 0;padding-left:0}.year-number{font-size:1.7rem;font-weight:700;color:#ba55d3;width:100px;text-align:right;padding-right:20px}.year-dot{width:14px;height:14px;background:linear-gradient(135deg,#ba55d3,#9370db);border-radius:50%;position:absolute;left:120px;top:50%;transform:translate(-50%,-50%) scale(0);box-shadow:0 0 0 3px rgba(255,240,250,.9);z-index:2;transition:all .3s ease;opacity:0}.timeline-year:hover .year-dot{transform:translate(-50%,-50%) scale(1);opacity:1}
/* 月份行 */
.timeline-month{position:relative;margin-bottom:0}.month-header{position:relative;display:flex;align-items:center;padding:.8rem 0;padding-left:0}.month-header.clickable{cursor:pointer}.month-header.clickable:hover{background:rgba(186,85,211,.06);margin-left:-1rem;padding-left:1rem;margin-right:-1rem;padding-right:1rem;border-radius:8px}.month-number{font-size:1.1rem;font-weight:600;color:#ba55d3;width:100px;text-align:right;padding-right:20px;opacity:.9;transition:all .3s ease}.month-header.clickable:hover .month-number{opacity:1;font-size:1.15rem}.month-dot{width:10px;height:10px;background:#ba55d3;border-radius:50%;position:absolute;left:120px;top:50%;transform:translate(-50%,-50%) scale(0);box-shadow:0 0 0 3px rgba(255,240,250,.9);z-index:2;transition:all .3s ease;opacity:0}.month-header:hover .month-dot{transform:translate(-50%,-50%) scale(1);opacity:1}.month-header.clickable:hover .month-dot{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 4px rgba(186,85,211,.4);background:#9370db}
/* 文章列表 */
.timeline-posts{display:flex;flex-direction:column;gap:0}.timeline-post{position:relative;display:flex;align-items:center;padding:.65rem 0;padding-left:0;transition:all .3s ease}.timeline-post:hover{background:rgba(186,85,211,.08);margin-left:-1rem;padding-left:1rem;margin-right:-1rem;padding-right:1rem;border-radius:8px}.post-day{font-size:.85rem;color:#8b5a8e;width:100px;text-align:right;padding-right:20px;font-family:'Courier New',monospace;font-weight:500;opacity:.8}.post-dot-small{width:7px;height:7px;background:#ba55d3;border-radius:50%;position:absolute;left:120px;top:50%;transform:translate(-50%,-50%) scale(0);z-index:2;box-shadow:0 0 0 2px rgba(255,240,250,.9);transition:all .3s ease;opacity:0}.timeline-post:hover .post-dot-small{background:#9370db;transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 0 3px rgba(186,85,211,.3);opacity:1}.post-link{flex:1;font-size:.9rem;color:#4a2c5f;text-decoration:none;transition:all .3s ease;padding-left:25px;line-height:1.5}.post-link:hover{color:#ba55d3;font-weight:500}
/* 响应式 */
@media screen and (max-width:992px){.archive-container{flex-direction:column}.archive-sidebar{width:100%;position:static;max-height:none;margin-bottom:1.5rem}}
@media screen and (max-width:768px){.simple-archive-page{padding:1.5rem 1rem 3rem}.archive-quote{padding:2rem 1rem}.quote-text{font-size:1.5rem}.timeline-content{padding:2rem 1.5rem}.timeline-content::before{left:80px}.year-number{font-size:1.6rem;width:70px;padding-right:10px}.month-number{font-size:1.1rem;width:70px;padding-right:10px}.post-day{font-size:.85rem;width:70px;padding-right:10px}.year-dot{left:80px;width:14px;height:14px}.timeline-year:hover .year-dot{transform:translate(-50%,-50%) scale(1)}.month-dot{left:80px;width:10px;height:10px}.month-header:hover .month-dot{transform:translate(-50%,-50%) scale(1)}.post-dot-small{left:80px;width:7px;height:7px}.post-link{font-size:.95rem;padding-left:20px}}
@media screen and (max-width:480px){.simple-archive-page{padding:1rem .8rem 2rem}.archive-quote{padding:1.5rem .8rem}.quote-text{font-size:1.2rem;letter-spacing:.15em}.timeline-content{padding:1.5rem 1rem}.timeline-content::before{left:60px}.year-number{font-size:1.4rem;width:50px;padding-right:8px}.month-number{font-size:1rem;width:50px;padding-right:8px}.post-day{font-size:.8rem;width:50px;padding-right:8px}.year-dot{left:60px;width:12px;height:12px}.timeline-year:hover .year-dot{transform:translate(-50%,-50%) scale(1)}.month-dot{left:60px;width:9px;height:9px}.month-header:hover .month-dot{transform:translate(-50%,-50%) scale(1)}.post-dot-small{left:60px;width:6px;height:6px}.post-link{font-size:.9rem;padding-left:15px;white-space:normal;line-height:1.5}}
/* 月份文章列表弹出面板 */
.month-posts-panel{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:none;animation:fadeIn .3s ease}
.month-posts-panel.active{display:block}
.panel-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.panel-content{position:absolute;top:0;right:0;bottom:0;width:90%;max-width:450px;background:#fff;box-shadow:-8px 0 32px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:linear-gradient(135deg,#ba55d3,#9370db);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.panel-title{display:flex;align-items:center;gap:.8rem;font-size:1.2rem;font-weight:600;margin:0}
.panel-title i{font-size:1.4rem}
.panel-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.panel-close:hover{background:rgba(255,255,255,.3);transform:scale(1.1)}
.panel-close i{font-size:1.1rem}
.panel-body{flex:1;overflow-y:auto;padding:1.5rem}
.posts-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem;color:#ba55d3}
.posts-loading i{font-size:2.5rem;animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.posts-list{display:flex;flex-direction:column;gap:.8rem}
.post-item{display:flex;gap:1rem;padding:1rem;background:rgba(186,85,211,.03);border-radius:10px;border-left:3px solid #ba55d3;transition:all .3s ease;text-decoration:none;color:#4a2c5f}
.post-item:hover{background:rgba(186,85,211,.08);transform:translateX(4px);box-shadow:0 4px 12px rgba(186,85,211,.15)}
.post-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:50px;background:linear-gradient(135deg,#ba55d3,#9370db);color:#fff;border-radius:8px;padding:.5rem;font-weight:600}
.post-date-day{font-size:1.6rem;line-height:1;font-weight:700}
.post-date-text{font-size:.7rem;opacity:.85;margin-top:.15rem}
.post-info{flex:1}
.post-title{font-size:1rem;font-weight:600;color:#4a2c5f;margin-bottom:.5rem;line-height:1.4}
.post-meta{display:flex;gap:.8rem;font-size:.85rem;color:#8b5a8e}
.post-meta-item{display:flex;align-items:center;gap:.3rem}
/* 带图片的文章卡片网格布局 */
.posts-list-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.archive-post-card{display:flex;gap:1rem;padding:1rem;background:rgba(255,255,255,.9);border-radius:12px;border:1px solid rgba(186,85,211,.15);transition:all .3s ease;text-decoration:none;color:#4a2c5f;overflow:hidden}
.archive-post-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(186,85,211,.25);border-color:rgba(186,85,211,.3)}
.archive-post-cover{width:140px;height:100px;flex-shrink:0;border-radius:8px;overflow:hidden;background:rgba(186,85,211,.08)}
.archive-post-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.archive-post-card:hover .archive-post-cover img{transform:scale(1.1)}
.archive-post-info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.5rem;min-width:0}
.archive-post-date{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#8b5a8e;font-weight:500}
.archive-post-date i{font-size:.9rem}
.archive-post-title{font-size:1rem;font-weight:600;color:#4a2c5f;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.archive-post-card:hover .archive-post-title{color:#ba55d3}
@media screen and (max-width:480px){.archive-post-cover{width:100px;height:75px}.archive-post-title{font-size:.9rem;-webkit-line-clamp:2}.archive-post-date{font-size:.8rem}}
.panel-footer{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:rgba(186,85,211,.03);border-top:1px solid rgba(186,85,211,.12)}
.pagination-btn{background:linear-gradient(135deg,rgba(186,85,211,.08),rgba(186,85,211,.04));border:1px solid rgba(186,85,211,.15);color:#ba55d3;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:.4rem}
.pagination-btn:hover:not(:disabled){background:linear-gradient(135deg,#ba55d3,#9370db);color:#fff;transform:scale(1.05);box-shadow:0 4px 12px rgba(186,85,211,.2)}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed}
.pagination-info{color:#6b4c7a;font-size:.9rem;font-weight:600}
@media screen and (max-width:768px){.panel-content{width:100%;max-width:100%}}
    </style>
    <!-- 顶部导航栏滚动隐藏脚本 -->
    <script>
        (function() {
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initHeaderScroll);
            } else {
                initHeaderScroll();
            }
            
            function initHeaderScroll() {
                const header = document.getElementById('page-header');
                if (!header) return;
                
                let lastScrollTop = 0;
                header.style.cssText = 'transform: translateY(0); transition: transform 0.3s ease;';
                
                // 处理导航栏滚动隐藏
                function handleHeaderScroll() {
                    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
                    
                    if (currentScroll > lastScrollTop && currentScroll > 150) {
                        header.style.transform = 'translateY(-100%)';
                    } else if (currentScroll < lastScrollTop || currentScroll <= 100) {
                        header.style.transform = 'translateY(0)';
                    }
                    
                    lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
                }
                
                // 滚动事件监听（节流）
                let scrollTimer = null;
                window.addEventListener('scroll', function() {
                    if (scrollTimer) {
                        clearTimeout(scrollTimer);
                    }
                    scrollTimer = setTimeout(handleHeaderScroll, 50);
                }, { passive: true });
            }
        })();
    </script>
</th:block>
<th:block th:fragment="content">

    <div class="page" id="body-wrap">
        <header class="not-top-img" id="page-header">
            <nav th:replace="~{modules/nav :: nav(title = '文章归档')}"></nav>
        </header>
        
        <!-- 简洁归档页面 -->
        <div class="simple-archive-page">
            <!-- 哲学名言 -->
            <div class="archive-quote">
                <p class="quote-text">在书页间，我与旧我重逢，并亲手绘制新我的蓝图</p>
            </div>
            
            <!-- 主体布局 -->
            <div class="archive-container">
                <!-- 左侧归档导航卡片（新组件） -->
                <aside class="archive-sidebar">
                    <div th:replace="~{modules/widgets/aside/archive-nav}"></div>
                </aside>

                <!-- 右侧时间线 -->
                <div class="timeline-content" th:with="allArchives = ${postFinder.archives(1,999)}">
                    <div class="timeline-wrapper" th:each="archive : ${allArchives.items}">
                        
                        <!-- 年份标题 -->
                        <div class="timeline-year" th:id="${'year-' + archive.year}">
                            <span class="year-number" th:text="${archive.year}"></span>
                            <div class="year-dot"></div>
                        </div>
                        
                        <!-- 月份和文章 -->
                        <div class="timeline-month" th:each="month : ${archive.months}">
                            <!-- 月份标题 - 可点击展开文章列表 -->
                            <div class="month-header clickable" 
                                 th:id="${'month-' + archive.year + '-' + month.month}"
                                 th:attr="data-year=${archive.year},data-month=${month.month}"
                                 onclick="openMonthPanel(this)">
                                <span class="month-number" th:text="${month.month + ' 月'}"></span>
                                <div class="month-dot"></div>
                            </div>
                            
                            <!-- 文章列表 -->
                            <div class="timeline-posts" 
                                 th:with="postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,'?') ? theme.config.layout.postRandomImg+'&' : theme.config.layout.postRandomImg+'?'}">
                                <div class="timeline-post" th:each="post : ${month.posts}"
                                     th:attr="data-cover=${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}">
                                    <span class="post-day" th:text="${#dates.format(post.spec.publishTime,'MM-dd')}"></span>
                                    <div class="post-dot-small"></div>
                                    <a class="post-link" 
                                       th:href="@{${post.status.permalink}}" 
                                       th:text="${post.spec.title}">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部 -->
        <footer th:replace="~{modules/footer}"/>
    </div>

    <!-- 月份文章列表弹出面板 -->
    <div class="month-posts-panel" id="monthPostsPanel">
        <div class="panel-overlay" onclick="closeMonthPanel()"></div>
        <div class="panel-content">
            <div class="panel-header">
                <h3 class="panel-title">
                    <i class="haofont hao-icon-calendar"></i>
                    <span id="panelMonthTitle">文章列表</span>
                </h3>
                <button class="panel-close" onclick="closeMonthPanel()">
                    <i class="haofont hao-icon-close"></i>
                </button>
            </div>
            <div class="panel-body" id="panelBody">
                <div class="posts-loading">
                    <i class="haofont hao-icon-loading"></i>
                    <span>加载中...</span>
                </div>
            </div>
            <div class="panel-footer" id="panelFooter" style="display:none">
                <button class="pagination-btn" id="prevBtn" onclick="loadPrevPage()">
                    <i class="haofont hao-icon-angle-left"></i> 上一页
                </button>
                <span class="pagination-info" id="pageInfo">1 / 1</span>
                <button class="pagination-btn" id="nextBtn" onclick="loadNextPage()">
                    下一页 <i class="haofont hao-icon-angle-right"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 月份面板JavaScript -->
    <script>
        // 全局变量
        let currentYear, currentMonth, currentPosts = [], currentPage = 1, totalPages = 1, totalPosts = 0;
        const pageSize = 10;
        
        // 打开月份面板
        function openMonthPanel(monthHeaderElement) {
            // 从DOM元素获取数据
            currentYear = monthHeaderElement.getAttribute('data-year');
            currentMonth = monthHeaderElement.getAttribute('data-month');
            currentPage = 1;
            
            // 获取该月份的文章列表（下一个兄弟元素）
            const postsContainer = monthHeaderElement.nextElementSibling;
            const postElements = postsContainer.querySelectorAll('.timeline-post');
            
            // 从DOM读取文章数据
            currentPosts = [];
            postElements.forEach(postEl => {
                const link = postEl.querySelector('.post-link');
                const day = postEl.querySelector('.post-day');
                const cover = postEl.getAttribute('data-cover');
                if (link && day) {
                    currentPosts.push({
                        title: link.textContent.trim(),
                        permalink: link.getAttribute('href'),
                        publishTime: currentYear + '-' + currentMonth + '-' + day.textContent.trim(),
                        cover: cover || '',
                        visit: 0,
                        comment: 0
                    });
                }
            });
            
            totalPosts = currentPosts.length;
            totalPages = Math.ceil(totalPosts / pageSize);
            
            console.log('打开月份面板:', {year: currentYear, month: currentMonth});
            console.log('找到文章数量:', totalPosts);
            
            // 更新标题
            document.getElementById('panelMonthTitle').textContent = currentYear + ' 年 ' + currentMonth + ' 月';
            
            // 显示面板
            document.getElementById('monthPostsPanel').classList.add('active');
            document.body.style.overflow = 'hidden'; // 禁止背景滚动
            
            // 加载文章
            loadMonthPosts(1);
        }
        
        // 关闭面板
        function closeMonthPanel() {
            document.getElementById('monthPostsPanel').classList.remove('active');
            document.body.style.overflow = ''; // 恢复滚动
        }
        
        // 加载上一页
        function loadPrevPage() {
            if (currentPage > 1) {
                currentPage--;
                loadMonthPosts(currentPage);
            }
        }
        
        // 加载下一页
        function loadNextPage() {
            if (currentPage < totalPages) {
                currentPage++;
                loadMonthPosts(currentPage);
            }
        }
        
        // 加载月份文章
        function loadMonthPosts(page) {
            const panelBody = document.getElementById('panelBody');
            const panelFooter = document.getElementById('panelFooter');
            
            // 显示加载状态
            panelBody.innerHTML = '<div class="posts-loading"><i class="haofont hao-icon-loading"></i><span>加载中...</span></div>';
            panelFooter.style.display = 'none';
            
            if (currentPosts.length === 0) {
                panelBody.innerHTML = '<div class="posts-loading"><span style="color:#8b5a8e">该月份暂无文章</span></div>';
                return;
            }
            
            // 分页处理
            const startIndex = (page - 1) * pageSize;
            const endIndex = Math.min(startIndex + pageSize, currentPosts.length);
            const posts = currentPosts.slice(startIndex, endIndex);
            
            // 渲染文章列表 - 带图片的卡片样式
            let html = '<div class="posts-list-grid">';
            posts.forEach(post => {
                // 从 publishTime 中提取日期（格式：YYYY-MM-DD）
                const publishTime = post.publishTime || '';
                
                // 转义HTML特殊字符
                const title = post.title.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
                const cover = post.cover || '';
                
                html += `
                    <a href="${post.permalink}" class="archive-post-card">
                        <div class="archive-post-cover">
                            <img src="${cover}" alt="${title}" loading="lazy">
                        </div>
                        <div class="archive-post-info">
                            <div class="archive-post-date">
                                <i class="haofont hao-icon-calendar"></i>
                                ${publishTime}
                            </div>
                            <div class="archive-post-title">${title}</div>
                        </div>
                    </a>
                `;
            });
            html += '</div>';
            
            panelBody.innerHTML = html;
            
            // 更新分页
            updatePagination();
        }
        
        // 更新分页状态
        function updatePagination() {
            const panelFooter = document.getElementById('panelFooter');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const pageInfo = document.getElementById('pageInfo');
            
            panelFooter.style.display = totalPages > 1 ? 'flex' : 'none';
            prevBtn.disabled = currentPage <= 1;
            nextBtn.disabled = currentPage >= totalPages;
            pageInfo.textContent = `${currentPage} / ${totalPages}`;
        }
        
        // ESC键关闭面板
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && document.getElementById('monthPostsPanel').classList.contains('active')) {
                closeMonthPanel();
            }
        });
    </script>

</th:block>

</html>